//
//   @description Used for all modules from ./src/components/[__]/scss
// 
//
//
//	  FONT SIZE HIERARCHY
//	  ---------------------------
//	
//    Default font-size for HTML :    16px
//    blockquote                 :    1rem
//    body                       :    1rem
//    form                       :    0.875rem
//    h1                         :    3.5rem
//    h2                         :    2.5rem
//    h3                         :    1.75rem
//    h4                         :    1.25rem
//    h5                         :    1rem
//    h6                         :    0.75rem
//
//
//	  GLOBAL SPACING HIERARCHY WITH <section>
//	  ---------------------------
//	
//    Large                      :    11.375rem
//    Medium                     :    6.5625rem
//    Small                      :    3rem
//    Default (mobile)           :    4.265625rem
//    Large (mobile)             :    4.265625rem
//    Small (mobile)             :    1.5rem
//
//
//
//	  COLOR PALETTE
//	  ---------------------------
//
//    Placeholder Text Color     :    #E6E6E8
//	  Primary Background Color   :    transparent
//	  Highlight Color            :    #CE3A3E, #DE510E
//	  Primary Text Color         :    #212121, #474747
//    Heading Text Color         :    #212121
//	  Subordinate Text Color     :    #AEAEAE
//	  Dividing Line Color        :    #F4F4F4
//    Button Gradient Color      :    #CE3A3E, #C04645, #DE510E





//	COMMON STYLE ATTRIBUTES IN THE MODULE
//	---------------------------
//  Note: Valid only on certain special modules
//
//    .is-active                --> Activate current element.
//    .is-dragging              --> The element being dragged.
//    .is-responsive            --> Let the current element use a responsive layout.
//    .is-horizontal            --> Let the elements be laid out horizontally.
//    .is-vertical              --> Let the elements be laid out vertically.
//    .is-fixed                 --> Let it be in a fixed position.
//    .is-mobile                --> Execute when using a mobile device.
//    .is-mobile-still          --> Do not change any style properties on mobile devices.
//    .is-mobile-hide           --> Hide this element on mobile devices.
//    .is-fill-white            --> Fill a white background.
//    .is-fullscreen            --> Display in full screen.
//    .is-fullwidth             --> Display in full width.
//    .is-video                 --> Determine if the element contains a video type.
//    .is-pill                  --> Display elements using pill style.
//    .is-rounded               --> Give the element "rounded corners".
//    .is-circle                --> Display elements using circle style.
//    .is-transparent           --> Make the background or other properties of the element transparent.
//    .is-animating             --> Contains animation effects.
//    .is-reversed              --> Change the layout direction of the elements to the opposite position.
//    .is-loaded                --> Determine if the element has been loaded.
//    .is-opened                --> Determine if the element has been opened.
//    .is-bordered              --> Add a border to the element.
//    .is-iconic                --> Elements and icons are used together.
//    .is-success               --> Returns a style of success, often used in forms.
//    .is-error                 --> Returns a style of error, often used in forms.
//    .is-hide-IE               --> Hide this element in old IE (10-). Only IE is valid.
//    .is-hide                  --> Hide this element.
//    .is-disabled              --> Disable this element.
//    .is-drop-target           --> Row Dropzone of Table.




// FONTS
// ---------------------------
// Files: 
// ./src/components/_global/scss/basic.scss
// ./src/components/_global/scss/typography.scss
// ./src/components/form/scss/_style.scss
//
//Default font-size for HTML
$basic-font-size       : 16px;
$font-stack            : 'Helvetica Neue', Helvetica, 'Microsoft YaHei', STXihei, 'PingFang SC','Hiragino Sans GB', Arial, sans-serif;
$font-mobile-stack     : "lucida grande", tahoma, verdana, arial, sans-serif;
$font-code             : "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
$font-size-body        : 1rem;
$font-size-blockquote  : 1rem;
$font-size-form        : 0.875rem;
$font-size-h1          : 3.5rem;
$font-size-h2          : 2.5rem;
$font-size-h3          : 1.75rem;
$font-size-h4          : 1.25rem;
$font-size-h5          : 1rem;
$font-size-h6          : 0.75rem;	


// GLOBAL SPACING HIERARCHY WITH <section>
// ---------------------------
// Files: 
// ./src/components/_global/scss/spacing.scss
//
$spacing-large          : 11.375rem;
$spacing-medium         : 6.5625rem;
$spacing-small          : 3rem;
$spacing-large-mobile   : $spacing-large/2;
$spacing-medium-mobile  : $spacing-medium/2;
$spacing-small-mobile   : $spacing-small/2;


// COLOR PALETTE
// ---------------------------
//
//Placeholder Text Color
$placeholder-text-color: #E6E6E8;

//Highlight Color
$highlight-color1      : #CE3A3E; //rgba($highlight-color1, 1)
$highlight-color2      : #DE510E; //rgba($highlight-color2, 1)

//Primary Text Color
$primary-text-color    : #212121;
$primary-link-color    : #474747;

//Heading Text Color
$heading-text-color    : #212121;

//Subordinate Text Color
$sub-text-color        : #AEAEAE;

//Dividing Line Color
$dividing-line-color   : #DCDCDC; //rgba($dividing-line-color, 1)

//Button Gradient Color
$btn-gradient-color1   : #CE3A3E;
$btn-gradient-color2   : #C04645;
$btn-gradient-color3   : #DE510E;


//Primary Background Color
$primary-bg-color      : transparent;


// Easing Transition
// ---------------------------
//
@mixin transition-cubic-bezier() {
	// @include transition-cubic-bezier();
	transition: 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}



// Default Transition
// ---------------------------
//
@mixin transition-default() {
	// @include transition-default(); 
	transition: all 0.3s ease;
}



// None Of Transition
// ---------------------------
//
@mixin transition-none() {
	// @include transition-none();
	transition: none; 
}


// Background Gradient
// ---------------------------
//
@mixin bg-gradient( $direction: 'to right' ) {
	// @include bg-gradient( 'to bottom' );
	// Compatible with ie9+
	background: $highlight-color1; 
	background: linear-gradient(#{$direction}, $highlight-color1 0%,$highlight-color2 100%);
}


// Icon & Text Gradient
// ---------------------------
//
@mixin icontxt-gradient( $direction: 'to right' ) {
	// @include icontxt-gradient( 'to bottom' );
	// The font is the default color when the browser is IE
	background: linear-gradient(#{$direction}, $highlight-color1 0%,$highlight-color2 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	
}


// Gradient Border
// ---------------------------
//
@mixin border-gradient( $color1, $color2, $border-width, $direction, $bg ) {
	// @include border-gradient( $highlight-color1, $highlight-color2, 3px, 'to right', #fff );
	// Compatible with ie9+
	background: #{$bg};
   
	
	&::after {
		/* Please do not convert it to block elements and set width and height. */
		content: '';
		background: #{$color1};
		background: linear-gradient(#{$direction}, #{$color1} 0%, #{$color2} 100%), linear-gradient(#{$direction}, #{$color1} 0%, #{$color2} 100%);
		position: absolute;
		top: -#{$border-width};
		bottom: -#{$border-width};
		right: -#{$border-width};
		left: -#{$border-width};
		z-index: -1;
		border-radius: inherit;
	}
	
}


// Outer Shadow Effect
// ---------------------------
// Optional values: thick, highlight, regular, light
//
@mixin outer-shadow( $type: 'thick', $color: '' ) {
	// @include outer-shadow( 'thick' );
	
	// thick
	@if ( $type == 'thick' ) {
		box-shadow: rgba(0, 0, 0, 0.18) 0 19px 38px, 
			        rgba(0, 0, 0, 0.08) 0 15px 12px;
	}
	
	// highlight
	@if ( $type == 'highlight' ) {
		
		@if ( $color == '' ) {
			$color: $highlight-color1;
		}
		
		box-shadow: rgba(0, 0, 0, 0.07) 0px 5px 15px 0px, 
			        rgba($color, 0.2) 0px 15px 35px 0px;
	}

	// regular
	@if ( $type == 'regular' ) {
		box-shadow: rgba(0, 0, 0, 0.07) 0px 5px 15px 0px, 
			        rgba(50, 50, 93, 0.1) 0px 15px 35px 0px;
	}
	
	// light
	@if ( $type == 'light' ) {
		box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px 0px;
	}
	
	
}



// Text wWith Ellipsis
// ---------------------------
//
@mixin ellipsis(){
	// @include ellipsis();
	overflow: hidden;
	text-overflow: ellipsis;	
	width: 100%;
	white-space: nowrap;
	
}

// Adding Stroke to Web Text
// ---------------------------
//
@mixin stroke-text( $color, $width: 1px, $fill: white ){
	// @include stroke-text( $highlight-color1, 1px, white );
	text-fill-color: #{$fill}; /* Will override color (regardless of order) */
	text-stroke-width: #{$width};
	text-stroke-color: #{$color};
}


//  Make the cursor a hand when a user hovers over an item
// ---------------------------
//
@mixin cursor-img( $img: '../../assets/images/demo/cursorhand.png' ){
	// @include cursor-img( '../../assets/images/demo/cursorhand.png' );
	cursor: url(#{$img}), auto;
	
}

//  Resize the background image to cover the entire container
// ---------------------------
//
@mixin background-cover() {
	// @include background-cover();
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}


// Custom Scrollbar
// ---------------------------
//
@mixin customScrollbar( $dir, $classname, $w: 8px ){
	// @include customScrollbar( 'vertical', '.classname' );
	#{$classname}::-webkit-scrollbar-track {
		border-radius: 0px;
		background-color: #e9ecee;
	}
	
	#{$classname}::-webkit-scrollbar-corner {
		background-color: transparent;
	}

	#{$classname}::-webkit-scrollbar-button {
		width: 0;
		height: 0;
		display: none;
	}


	@if ( $dir == 'vertical' ) {
		#{$classname}::-webkit-scrollbar {
			width: #{$w};
		}
	} @else {
		#{$classname}::-webkit-scrollbar {
			height: #{$w};
		}

	}

	#{$classname}::-webkit-scrollbar-thumb {
		border-radius: 0px;
		background-color: rgba(0,0,0,0.2);
		box-shadow: inset 1px 1px 0 rgba(0,0,0,0.10), inset 0 -1px 0 rgba(0,0,0,0.07);
	}
	
	
	#{$classname}::-webkit-scrollbar-thumb:hover {
		background-color: rgba(0,0,0,0.3);
	}

	
	
}



// Security Width Setting for Absolute Element 
// ---------------------------
// Note: Generally used for elements that cannot use ".container", such as 
//       absolutely elements whose security width cannot be determined
//
@mixin securityWidthForElement( $classname: '.demo', $mouseEvents: false ){
	// @include securityWidthForElement( '.txt', false );


	@if ( $classname != '' ) {
		/* New XL container for Bootstrap 4.x */
		#{$classname} {
			width: 1140px;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			padding-left: 15px;
			padding-right: 15px;

			/* Prevent layers from hiding the underlying elements */
			@if ( $mouseEvents ) { 
				pointer-events: auto;
			} @else {
				pointer-events: none;
			}
			
			> div {
				pointer-events: auto;
			}
		}

		@media all and (max-width: 1141px) {
			#{$classname} {
				width: calc( 100% - 15px);
			}
		}

		@media all and (min-width: 1430px) {
			#{$classname} {
				width: 1278px;
			}
		}


	}
	
}




// Vertically Align Element 
// ---------------------------
// To vertically align an inline element's box inside its containing line box, 
// it could be used to vertically position an <img> in a line of text.
//
@mixin center-vertically( $pseudo-el: 'before' ) {
	//@include center-vertically();
	
    position: relative;

    &:#{$pseudo-el} {
        content: '';
        position: relative;
        height: 100%;
        width: 0;
    }

    &:#{$pseudo-el},
    > * {
        vertical-align: middle;
        display: inline-block;
    }
}
  
